<!--
 * @description 单元格组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 -->
<template>
	<view
		class="pure-cell"
		:class="_classes"
		:style="_styles"
		:hover-class="hoverClass"
		@tap="_handleClick"
	>
		<!-- 图标 -->
		<view
			class="pure-cell__icon"
			v-if="iconName || $slots.icon"
		>
			<slot name="icon">
				<pure-icon
					:name="iconName"
					v-bind="iconOpts"
				></pure-icon>
			</slot>
		</view>

		<!-- Content -->
		<view class="pure-cell__content">
			<slot>
				<view
					class="pure-cell__main"
					v-if="title || $slots.title"
				>
					<!-- 标题 -->
					<view
						class="pure-cell__title"
						:class="titleLines ? `pure-cell__title--lines pure-line-${titleLines}` : ''"
						v-if="title || $slots.title"
					>
						<slot name="title">
							{{ title }}
						</slot>
					</view>

					<view
						class="pure-cell__tips"
						v-if="tips || $slots.tips"
						:class="tipsLines ? `pure-cell__tips--lines pure-line-${tipsLines}` : ''"
					>
						<slot name="tips">
							{{ tips }}
						</slot>
					</view>
				</view>

				<!-- 描述 -->
				<view
					class="pure-cell__desc"
					:class="descLines ? `pure-cell__desc--lines pure-line-${descLines}` : ''"
					v-if="desc || $slots.desc"
				>
					<slot name="desc">
						{{ desc }}
					</slot>
				</view>
			</slot>
		</view>

		<!-- 箭头 -->
		<view
			class="pure-cell__arrow"
			v-if="showArrow || $slots.arrow"
		>
			<slot name="arrow">
				<pure-icon
					:name="arrowName"
					v-bind="arrowOpts"
				></pure-icon>
			</slot>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, useAttrs } from "vue";
	import props from "./props";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 旋转箭头图标
		if (_props.rotate) array.push("pure-cell--rotate");

		// 顶对齐
		if (_props.topAlign) array.push("pure-cell--top-align");

		// 朴素样式
		if (_props.plain) array.push("pure-cell--plain");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];
		return array;
	});

	// 点击事件
	function _handleClick() {
		_emits("onClick");
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
